<template>
	<view class="page">

		<!-- 头部 -->
		<u-sticky offset-top="0" :bgColor="bgColor">
			<image class="page-bg2" mode="widthFix" :src="imageUrl + 'hg-bg3.png'"></image>
			<u-navbar leftText="充值记录" title=" " @rightClick="rightClick" :autoBack="true" placeholder :safeAreaInsetTop="true" :bgColor="bgColor"></u-navbar>
			<view class="m-mzw-date1">
				<view class="wp">
					<view class="con">
						<view class="date" :class="{'focus':startShow}" @click="handleStartPicker">
							<view>{{startDateValue}}</view>
							<div class="icon">
								<image :src="imageUrl+'mzw/icon-a1.svg'" mode="widthFix" style="width:100%;"></image>
							</div>
						</view>
						<view class="line">—</view>
						<view class="date" :class="{'focus':endShow}" @click="handleEndPicker">
							<view>{{endDateValue}}</view>
							<div class="icon">
								<image :src="imageUrl+'mzw/icon-a1.svg'" mode="widthFix" style="width:100%;"></image>
							</div>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>

		<!-- 主内容 -->
		<view class="page-content">
			<view class="wp">
				<view class="lst-hg4">
					<view class="item" v-for="(item, index) in 12" :key="index">
						<view class="left">
							<view class="t1">
								<view class="tel">123 4545 8686</view>
								<view class="tag">手机号</view>
							</view>
							<view class="date">2025-09-12 14:23:33</view>
						</view>
						<view class="right">
							<view class="price">+￥<view class="num">100.00</view></view>
							<view class="state">充值成功</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 开始日期弹窗 -->
		<view class="m-mzw-date-popup">
			<u-popup :show="startShow" mode="top" :overlayStyle="overlayStyle" :customStyle="customStyle" :safeAreaInsetTop="true" :safeAreaInsetBottom="false" :zIndex="99" @close="startClose">
				<view class="popup-con">
					<mzw-date-picker default-value="2025-06-19" @reset="handleStartReset" @confirm="handleStartConfirm"></mzw-date-picker>
				</view>
			</u-popup>
		</view>
		<!-- 结束日期弹窗 -->
		<view class="m-mzw-date-popup">
			<u-popup :show="endShow" mode="top" :overlayStyle="overlayStyle" :customStyle="customStyle" :safeAreaInsetTop="true" :safeAreaInsetBottom="false" :zIndex="99" @close="endClose">
				<view class="popup-con">
					<mzw-date-picker default-value="2025-06-19" @reset="handleEndReset" @confirm="handleEndConfirm"></mzw-date-picker>
				</view>
			</u-popup>
		</view>

	</view>
	
</template>

<script>
	import mzwDatePicker from '@/components/mzw-date-picker.vue';
	export default {
		components:{
			mzwDatePicker
		},
		data() {
			return {
				// 头部背景色
				bgColor: 'transparent',

				// 日期
				datePopShow1: false,
				datePopVal1: '2025-06-19',
				datePopValRs1: '',
				
				datePopShow2: false,
				datePopVal2: '2025-06-19',
				datePopValRs2: '',


				
				startShow: false,
				endShow: false,
				overlayStyle:{
					backgroundColor: 'rgba(28, 39, 76, 0.6)',
					zIndex: 99
				},
				startDateValue: '2025-06-19',
				endDateValue: '2025-06-19'

			}
		},
		onLoad() {},
		methods: {
			// 日期事件
			// close() {
			// 	this.datePopShow1 = false
			// 	this.datePopShow2 = false
			// },
			// cancel() {
			// 	this.datePopShow1 = false
			// 	this.datePopShow2 = false
			// },
			// confirm1(e) {
			// 	this.datePopShow1 = false
			// 	this.datePopValRs1 = this.result(e.value, e.mode)
			// },
			// confirm2(e) {
			// 	this.datePopShow2 = false
			// 	this.datePopValRs2 = this.result(e.value, e.mode)
			// },
			// result(time, mode) {
			// 	const timeFormat = uni.$u.timeFormat
			// 	switch (mode) {
			// 		case 'datetime':
			// 			return timeFormat(time, 'yyyy-mm-dd hh:MM')
			// 		case 'date':
			// 			return timeFormat(time, 'yyyy-mm-dd')
			// 		case 'year-month':
			// 			return timeFormat(time, 'yyyy-mm')
			// 		case 'time':
			// 			return time
			// 		default:
			// 			return ''
			// 	}
			// },
			
			handleStartPicker(){
				this.endShow = false;
				this.startShow = true;
			},
			startClose(){
				this.startShow = false;
			},
			handleStartConfirm(e){
				this.startDateValue = e.date;
				this.startShow = false;
			},
			handleStartReset(){
				this.startDateValue = '2025-06-19';
				this.startShow = false;
			},
			handleEndPicker(){
				this.startShow = false;
				this.endShow = true;
			},
			endClose(){
				this.endShow = false;
			},
			handleEndConfirm(e){
				this.endDateValue = e.date;
				this.endShow = false;
			},
			handleEndReset(){
				this.endDateValue = '2025-06-19';
				this.endShow = false;
			},
		}
	}
</script>

<style lang="scss">

page{
	padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
	background: #F4FAF7;
}

</style>